
<template>
    <div class="vheader">
        <ul>
            <li class="edit" @click="logoutMethod">
                <i class="icon-ddex-exit"></i>
                <el-button type="text" style="color:#2c3e50;">exit</el-button>
            </li>
            <li class="userinfo">
                <img src="" alt="">
                <span>{{userInfo && userInfo.alias || ''}}</span>
            </li>
        </ul>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {}
    },
    computed: {
        ...mapState(['userInfo'])
    },
    methods: {
        logoutMethod() {
            this.$confirm('即将退出系统，请检查当前页面是否有未保存的数据', '提示', {
                confirmButtonText: '继续退出',
                cancelButtonText: '取消退出'
            }).then(() => {
            	this.$store.dispatch('logoutAction').then(result => {
            		this.$router.push('/login')
            	})
            })
        }
    }
}
</script>

<style scoped>
	.vheader {
		background-color: #fff;
		height: 60px;
		width: 100%;
		-moz-box-shadow: 0px -4px 35px #ccc;
		-webkit-box-shadow: 0px -4px 35px #ccc;
		box-shadow: 0px -4px 35px #ccc;
	}
	ul li {
		float: right;
		height: 60px;
		line-height: 60px;
	}
	.userinfo {
		height: 60px;
		line-height: 60px;
		font-size: 12px;
	}
	.userinfo img {
		height: 40px;
		width: 40px;
		background-color: pink;
		border-radius: 50%;
		vertical-align:middle;
		margin-right: 7px;
		outline-style: none;
	}
	.edit {
		margin: 0 50px 0 30px;
		cursor: pointer;
	}
	.edit i {
		font-size: 20px;
		color: #989898;
		vertical-align: middle;
		margin-right: 5px;
	}
</style>